<template>
	<uni-popup ref="popupRef" type="bottom">
		<view class="popup">
			<view class="popup-head flex-row">
				<text class="title">在线留言</text>
				<view @tap="close" class="close flex-column">
					<text class="iconfont icon-close"></text>
				</view>
			</view>
			<scroll-view class="popup-body" :scroll-y="true" :show-scrollbar="false">
				<view class="form-item">
					<view class="label">电话</view>
					<input class="input" v-model="form.phone" type="number" :maxlength="11" placeholder="请输入手机号" />
				</view>
				<view class="form-item">
					<view class="label">微信</view>
					<input class="input" v-model="form.wechat" :maxlength="60" placeholder="请输入微信号" />
				</view>
				<view class="form-item">
					<view class="label">邮箱</view>
					<input class="input" v-model="form.email" :maxlength="60" placeholder="请输入邮箱" />
				</view>
				<view class="form-item">
					<view class="label">内容</view>
					<textarea class="input textarea" v-model="form.content" :maxlength="200" placeholder="请输入内容" />
				</view>
				<view class="foot">
					<view @tap="submit" class="submit flex-column">提交留言</view>
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import Validator from '@/common/validate'
import XBCCS from 'xbccs'

const popupRef = ref(null)
const form = reactive({
	phone: '',
	wechat: '',
	email: '',
	content: ''
})

function close(){
	popupRef.value?.close()
}

// 弹窗
function showToast(title: string = ''){
	uni.showToast({
		icon: 'none',
		title
	})
	return
}

// 提交
function submit(){
	// 数据校验
	const { phone, email, wechat, content } = form
	if(Validator.isNull(phone) && Validator.isNull(wechat) && Validator.isNull(email)){
		return showToast('联系方式不能全为空')
	}
	if(!Validator.isNull(phone) && !Validator.isPhone(phone)){
		return showToast('手机号格式错误')
	}
	if(!Validator.isNull(email) && !Validator.isEmail(email)){
		return showToast('邮箱格式错误')
	}
	if(Validator.isNull(content)){
		return showToast('留言内容不能为空')
	}
	
	// 执行提交
	try{
		uni.showLoading({
			title: '留言提交中'
		})
		
		XBCCS.addMsg(form).then(() => {
			form.phone = ''
			form.wechat = ''
			form.email = ''
			form.content = ''
			showToast('留言成功')
			popupRef.value?.close()
		}).catch((err) => {
			showToast(err?.data?.msg || '留言失败')
		})
	}finally{
		uni.hideLoading()
	}
}

defineExpose({
	open(){
		popupRef.value?.open()
	}
})

</script>

<style lang="scss" scoped>
@import url('./style.scss');
.foot{
	padding: 40rpx 20rpx;
	
	.submit{
		color: #fff;
		width: 100%;
		height: 80rpx;
		line-height: 1;
		font-size: 32rpx;
		border-radius: 10rpx;
		background-color: var(--theme-color);
		transition: opacity 0.1s;
		
		&:active{
			opacity: 0.8;
		}
	}
}

.form-item{
	padding: 0 20rpx;
	margin-bottom: 30rpx;
	
	.label{
		font-size: 30rpx;
	}
	
	.input{
		width: 100%;
		height: 76rpx;
		padding: 0 20rpx;
		font-size: 30rpx;
		margin-top: 16rpx;
		border-radius: 4rpx;
		border: 2rpx solid #999;
		
		&.textarea{
			padding: 16rpx 20rpx;
			height: 160rpx;
		}
	}
}
</style>